<script setup>
import { ref, onMounted } from "vue";
import toolApi from "@/api/tool.js";
import { ElMessage } from "element-plus"; // 添加消息提示
import request from "@/utils/request.js";

const baseUrl = request.defaults.baseURL + '/images/';
const uploadUrl = request.defaults.baseURL + '/file/upload';
const tools = ref([]);
const dialogVisible = ref(false);
const isEdit = ref(false);
const form = ref({
  toolId: null,
  toolName: '',
  link: '',
  icon: '',
  categoryName: ''
});
const preview = ref({icon:''})

// 获取工具列表
const fetchTools = async () => {
  const res = await toolApi.getListWithCategoryName();
  tools.value = res; // 你已经处理了 res.data.data，所以直接赋值
};

const handleUploadSuccess = (res) => {
  form.value.icon = res.data ; // 后端返回的图片访问地
  preview.value.icon = baseU  rl + res.data;
}

// 添加按钮
const handleAdd = () => {
  isEdit.value = false;
  form.value = {
    toolId: null,
    toolName: '',
    link: '',
    icon: '',
    categoryName: ''
  };
  dialogVisible.value = true;
};

// 编辑按钮
const handleEdit = (tool) => {
  isEdit.value = true;
  form.value = { ...tool };
  dialogVisible.value = true;
};

// 删除按钮
const handleDelete = async (id) => {
  await toolApi.delete(id);
  fetchTools();
};

// 保存（新增或更新）
const handleSave = async () => {
  if (!form.value.toolName || !form.value.link || !form.value.categoryName) {
    ElMessage.warning("请填写完整信息");
    return;
  }

  if (isEdit.value) {
    await toolApi.updateWithCategoryName(form.value);
  } else {
    await toolApi.addWithCategoryName(form.value);
  }

  dialogVisible.value = false;
  fetchTools();
};

onMounted(() => {
  fetchTools();
});
</script>

<template>
  <div>
    <el-button type="primary" @click="handleAdd">添加工具</el-button>
    <el-table :data="tools" style="width: 100%; margin-top: 20px">
      <el-table-column prop="toolName" label="工具名称" />
      <el-table-column prop="link" label="链接" />
      <el-table-column  label="图标" >
        <template #default="scope">
          <img :src="baseUrl + scope.row.icon" alt="图标" style="width: 32px; height: 32px;" />
        </template>
      </el-table-column>
      <el-table-column prop="categoryName" label="分类名称" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.toolId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="isEdit ? '编辑工具' : '添加工具'" v-model="dialogVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="工具名称">
          <el-input v-model="form.toolName" />
        </el-form-item>

        <el-form-item label="链接">
          <el-input v-model="form.link" />
        </el-form-item>

        <el-form-item label="图标">
          <el-upload
              class="upload-demo"
              :action="uploadUrl"
          name="file"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          >
          <el-button type="primary">上传图标</el-button>
          </el-upload>

          <!-- 图标预览 -->
          <div v-if="preview.icon" style="margin-top: 10px;">
            <img :src="preview.icon" alt="图标预览" style="width: 40px; height: 40px;" />
          </div>
        </el-form-item>

        <el-form-item label="分类名称">
          <el-input v-model="form.categoryName" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>

  </div>
</template>
